<template>
    <div class="content">
        <!-- 英语学习 顶部Logo栏 -->
        <div class="top-contain">
            <div class="logoBlock">
                <!-- <el-avatar :size="50"></el-avatar>
                        <div>用户名</div> -->
                <a href="#" title="Study English">
                    <img src="~/assets/img/study-logo.png" width="100%" height="100%" alt="Study English">
                </a>
            </div>
        </div>

        <div class="m-contain">
            <el-page-header @back="goBack">
            </el-page-header>
            <div class="card">
                <div class="card-header">
                    <div class="card-header-title">
                        <b>听力</b>
                    </div>
                </div>
                <el-divider></el-divider>
                <div class="card-body">
                    <div class="top-contain">
                        <p class="listening-title"><b>{{studyListening.name}}</b></p>
                        <audio controls="controls" :src="studyListening.link"></audio>
                    </div>
                    <el-divider></el-divider>
                    <div class="markdown-body" v-html="studyListening.content"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import studyApi from '@/api/study'
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import cookie from "js-cookie";



export default {

  asyncData({ params, error }) {
     return {listening: params.id}
   },

  data() {
    return {
        studyListening: {}
    };
  },

  created() {
    this.getStudyListening(this.listening)
  },

  methods: {

    goBack() {
        this.$router.push('/learn')
    },

    //得到听力内容
    getStudyListening(listeningId) {
        studyApi.getStudyListening(this.listening).then(response => {
            var data = response.data.data
            this.studyListening = data.studyListening 
            // 将内容转为markdown格式
            var MarkdownIt = require('markdown-it'),
            md = new MarkdownIt();
            var result = md.render(data.studyListening .content);
            this.studyListening.content = result
        })
    },
  },
};
</script>

<style scoped>
.content {
  margin: 0 auto;  
  background-color: #F1F2F7;
  padding-top: 10px;
  padding-bottom: 200px;
}

.top-contain {
  max-width: 1150px;
  margin: 0 auto;
}
.logoBlock {
  width: 300px;
  height: 64.87px;
  margin: 0 auto;
}

.m-contain {
  max-width: 1150px;
  margin: 0 auto;
  margin-top: 20px;
}

.card {
    max-width: 1150px;
    border: 3px solid #E8E9EE;
    border-radius: 10px;
    margin: 0 auto;
    background-color: #FFFFFF;
    margin-top: 20px;
}

.card-header {
    padding: 5px 20px;
    background-color: #F7F7F7;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.card-header-title {
    font-size: 18px;
}

.el-divider {
    margin-bottom: 0px;
    margin-top: 0px;
}

.card-body {
    padding: 10px 25px;
}

.listening-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}

audio {
    margin-bottom: 20px;
}
</style>